<template>
    <rx-dialog @handOk="onOk" @cancel="cancel">
        <rx-layout>
            <div slot="center">
                <div class="range">
                    <div class="table-operator">
                        <i class="iconfont iconjia " @click="addRow"></i>
                        <i class="iconfont icontrash" @click="removeRow"></i>
                        <i class="iconfont iconshang" @click="upRow"></i>
                        <i class="iconfont iconxia" @click="downRow"></i>
                    </div>
                    <rx-grid ref="table"
                             :dataSource="colorSettings"
                             :ellipsis="false"
                             :columns="columns"
                             :allowRowSelect="true"
                             :multiSelect="true"
                             :showPage="false"
                             borders="true"
                             :allowMoveColumn="false">
                       <span slot="action" slot-scope="{text, record,index}" class="actionIcons" size="2">
                           <span  @click="edit(record)">{{$ti18('rxList.editBtn','编辑')}}</span>
                           <span  @click="del([record.idx_])">{{$ti18('rxList.delBtn','删除')}}</span>
                      </span>
                    </rx-grid>
                </div>
            </div>
        </rx-layout>
    </rx-dialog>
</template>

<script>
import {RxGrid, Util, Dialog} from "@lowcode/jpaas-common-lib";
import ColorSetting from "@/views/modules/form/core/chartDef/ColorSetting";

export default {
    name: "color-settings",
    props: ["layerid", "destroy","fieldSetting","visualMap"],
    components: {
        RxGrid,
        Dialog
    },
    data() {
        return {
            colorSettings: [],
            fieldDataType: 'string',
            columns: [{
                title: this.$ti18('rxList.index','序号'),
                width: 70,
                dataIndex: 'index',
                type: 'indexColumn',
                scopedSlots: {customRender: 'index'}
            },
                {title: this.i18n('form.label','标签'), dataIndex: 'label', width: 200},
                {title: this.i18n('form.newLabel','新标签'), width: 200, dataIndex: 'newLabel'},
                {title: this.$ti18('rxList.action','操作'), width: 100, dataIndex: 'action', scopedSlots: {customRender: 'action'}}
            ],
        }
    },
    computed: {
        table() {
            return this.$refs.table;
        },
    },
    created() {
        this.init();
    },
    methods: {
        i18n(name, text, key) {
            return this.$ti18(name, text, "formChartDef", key);
        },
        init(){
            if(this.fieldSetting && this.fieldSetting.colorSetting){
                this.colorSettings=this.fieldSetting.colorSetting;
            }
        },
        edit(record){
            var self=this;
            var baseConf = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                zIndex: 9999,
                component:ColorSetting,
                title: self.i18n('list.colorConfig','颜色配置'),
                shade:true,
                data:{
                    fieldSetting:{colorSetting:record},
                    showLabel:true,
                    visualMap:this.visualMap
                }
            };
            Util.open(baseConf, function (action,data) {
                if (action != 'ok') return;
                self.table.updateRow(record,data);
            })
        },
        del(rowKeys){
            this.table.removeRows(rowKeys);
        },
        addRow() {
            var self=this;
            var baseConf = {
                curVm: this,
                widthHeight: ['800px', '600px'],
                zIndex: 9999,
                component:ColorSetting,
                title: self.i18n('list.colorConfig','颜色配置'),
                shade:true,
                data:{
                    showLabel:true,
                    visualMap:this.visualMap
                }
            };
            Util.open(baseConf, function (action,data) {
                if (action != 'ok') return;
                self.table.addRow(data);
            })

        },
        removeRow() {
            this.table.removeRows();
        },
        upRow() {
            this.table.moveUp();
        },
        downRow() {
            this.table.moveDown();
        },
        onOk(){
            Util.closeWindow(this, "ok",this.colorSettings);
        },
        cancel(){
            Util.closeWindow(this, "cancel");
        },
    }
}
</script>

<style scoped>
.table-operator {
    float: right;
}

.table-operator > i {
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    background-color: #f5f7fa;
    border: solid 1px #dadde0;
    border-left: none;
    display: block;
    float: left;
}

.table-operator > i:nth-child(1) {
    border-left: solid 1px #dadde0;
    border-radius: 5px 0px 0px 5px;
}

.table-operator > i:nth-child(4) {
    border-radius: 0px 5px 5px 0px;
}

.rendering {
    border-left: 3px solid #1890ff;
    height: 10px;
    line-height: 10px;
    padding-left: 5px;
    width: 100px;
    float: left;
    margin-top: 16px;
}

.aselect {
    width: calc(100% - 120px);
    margin-left: 10px;
}

.effect {
    padding: 3px 10px 3px 10px;
    border-radius: 5px;
}

.rcgrid {
    height: calc(100% - 50px);
}

.be_colour {
    width: 50px;
}

.range {
    height: 100%;
    padding: 20px;

}
</style>